<template>
  <div v-infinite-scroll="loadMore"
       infinite-scroll-disabled="loading"
       infinite-scroll-distance="10">
    <header class="header">
      <div  style="width: 94%;height: 180px;margin: 0 auto;">
        <div style="width: 100%;height: 10px;">&nbsp;</div>
        <div class="swiper-container"style="height: 100%;position: relative;">
          <div class="swiper-wrapper"style="height: 100%;">
            <div class="swiper-slide">
              <img src="../../assets/52.png" alt="" width="100%"height="100%"/>
            </div>
            <div class="swiper-slide">
              <img src="../../assets/52.png" alt="" width="100%"height="100%"/>
            </div>
            <div class="swiper-slide">
              <img src="../../assets/52.png" alt="" width="100%"height="100%"/>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"style="position: absolute;margin: 0 auto;left: 50%;transform: translate(-50%, -50%);margin-top: 12px;"></div>
      </div>
    </header>
    <article>
      <div class="common-tel">
        <!--会员专享-->
        <!--<div class="common-tel-dot"><em></em> <em></em> <em></em></div>-->
      </div>
      <div class="shop">
        <div class="shop-goods"v-for="(item,index) in DataList"@click="IntegralDetail(index)">
          <!--<a href="详情页面.html">-->
            <img :src="imgTitl+item.default_image" alt="" />
            <div class="shop-goods-info">
              <p>{{item.goods_name}}</p>
              <p>
                <!-- {{item.price}} -->
              </p>
              <p>
                积分数：
                <em>
                  <i>{{((Number(item.gonghuojia)*Number(Eleven)).toFixed(2))*100/100}}积分</i>
                  <!--<i>{{parseInt(Number(item.gonghuojia)*Number(Eleven))}}积分</i>-->
                </em>
              </p>
            </div>
        </div>
      </div>
      <div style="width: 100%;height: 50px;"></div>
    </article>
    <Footer></Footer>
  </div>
</template>

<script>
import axios from 'axios'
import Swiper from 'swiper'
import '../../../node_modules/swiper/dist/css/swiper.min.css'
import CommonRecommend from '../Common-recommend/Common-recommend'
import CommonTel from '../Common-tel/Common-tel'
import CommonGoodsList from '../Common-goods-List/Common-goods-List'
import { InfiniteScroll } from 'mint-ui';
import { Toast } from 'mint-ui';
import Footer from '../Footer/Footer'
export default {
components: {CommonRecommend,CommonGoodsList,Footer,CommonTel},
data(){
return{
DataList:[],
company:'1',
order:'1',
total:'',
num:'1',
openid:'oEhus5qPt0FvUjLFVIN7jynQVJl8',
sign:'D26DAFE22E6CB33F8C22B9D632B0F121',
goods_id:'',
// data:{
// "order":'1',
// "page":'1',
// },
  page:'1',
apiUrl:'goods/getList',
imgTitl:'http://statics.76sd.com',
IntegralRatio:'10',
  Eleven:'11',
  ond:''
}
},
created(){
axios.get('http://api.huiwanzhong365.com/integral/integralList', {
params: {
// 'apiUrl':this.apiUrl,
// 'data':this.data,
'openid':localStorage.getItem('openid'),
},
}).then(response =>{
  this.total = response.data.total;
}).catch(function (error) {
console.log(error);
});
},
mounted(){
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
    },
  });
$(window).bind("scroll", this.Paging);
this.getData();
},
  methods:{
    IntegralDetail(index){
      this.goods_id = this.DataList[index].goods_id
      this.$router.push({name:'IntegralDetail'});
      this.$router.push({name: 'IntegralDetail', params: {id:this.goods_id}});
    },
    getData(){
      axios.get('http://api.huiwanzhong365.com/integral/integralList', {
        params: {
          // 'apiUrl':this.apiUrl,
          // 'data':this.data,
          'openid':localStorage.getItem('openid'),
          'page':this.page,
        },
      }).then(response =>{
        this.ond = response.data.status;
        this.page++;
        this.DataList = this.DataList.concat(response.data.data);
        console.log(response.data.total)
      }).catch(function (error) {
        console.log(error);
      });

    },
    loadMore(){
      console.log(this.DataList.length,this.total)
      if (this.DataList.length != this.total){
        this.getData();
      } else {
      }
    }
  },
}
</script>

<style scoped>co
  /* * {
    margin: 0;
    padding: 0;
  } */
  body {
    width: 100%;
    /*background: rgba(249, 249, 249, 1);*/
  }
  .banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    overflow: auto;
    align-content: center;
  }
  .swiper-pagination-bullet {
      margin: 0 5px;
  }
  .banner::-webkit-scrollbar {
    display: none;
  }
  .banner-img {
    width: 323px;
    /* height: 26px; */
    margin: 10px;
    /* border-radius: 10px; */
  }
  .banner-img img {
    border-radius: 5px;
  }

  .swiper-pagination-bullet {
    margin-left: 5px;

  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: rgba(252, 40, 71, 1);
  }
  ul {
    position: absolute;
     float: left;
    /* display: flex; */
    top: 170px;
    /* left: 0; */
  }
  li {
    /* position: fixed; */
    float: left;
    margin-left: 20px;
    list-style-type: circle;
    text-align: center;
  }
  .active {
    color: #fe2746;
    list-style-type: disc;
  }
  .common-tel {
    width: 94%;
    margin: 0 auto;
    margin-top: 15px;
    color: #fe2746;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    margin-left: 3%;
  }
  .common-tel-dot em:nth-child(1) {
    width: 12px;
    height: 2px;
    background: #fe2746;
    float: left;
    margin-top: 5px;
  }
  .common-tel-dot em:nth-child(2) {
    width: 8px;
    height: 2px;
    background-color: rgba(254, 39, 70, 0.59);
    float: left;
    margin-top: 5px;
    margin-left: 6px;
  }
  .common-tel-dot em:nth-child(3) {
    width: 6px;
    height: 2px;
    background-color: rgba(254, 39, 70, 0.3);
    float: left;
    margin-top: 5px;
    margin-left: 6px;
  }
  .common-tel a {
    color: #fe2746;
    float: right;
    font-size: 12px;
    font-weight: 100;
    margin-top: -13px;
  }
  .common-tel a i {
    color: #fe2746;
  }
  .team-spell {
    width: 94%;
    margin: 0 auto;
  }
  .team-spell-goods img {
    width: 100%;
    height: 112px;
  }
  .team-spell-goods {
    width: 32%;
    background: #fff;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
    padding-bottom: 5px;
  }
  .team-spell a:nth-child(2) {
    margin: 10px 2% 0;
  }
  .team-spell-goods p:nth-child(2) {
    width: 94%;
    margin: 0 auto;
    font-size: 12px;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
  }
  .team-spell-goods p:nth-child(3) {
    font-size: 12px;
    color: #fe2746;
    width: 94%;
    margin: 0 auto;
  }
  .team-spell-goods p:nth-child(3) em {
    font-weight: 600;
    color: #fe2746;
  }
  .team-spell-goods p:nth-child(4) {
    font-size: 12px;
    width: 94%;
    margin: 5px auto;
    color: #999;
  }
  .team-spell-goods p:nth-child(4) em {
    font-size: 12px;
    background-color: rgba(252, 40, 71, 0.07);
    color: #fc2847;
    float: right;
    padding: 2px 5px;
    border-radius: 20px;
    margin-top: -3px;
  }
  .shop-goods-info p:nth-child(1) {
    width: 94%;
    margin: 0 auto;
    font-size: 12px;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    color: #101010;
  }
  .shop-goods-info p:nth-child(2) {
    width: 94%;
    margin: 0 auto;
    font-size: 12px;
    color: #999;
  }
  .shop-goods-info p:nth-child(3) {
    font-size: 12px;
    color: #999;
    width: 94%;
    margin: 0 auto;
    margin-top:5px;
  }
  .shop-goods-info p:nth-child(3) em {
    color: #fc2847;
  }
  .shop-goods-info p:nth-child(3) em i {
    color: #fc2847;
    font-size: 16px;
  }
  .shop {
    width: 94%;
    display: inline-block;
    margin-left: 3%;
    margin-top:15px;
  }
  /* .shop-goods {
    width: 47%;
    float: left;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
    padding-bottom: 10px;
  } */
  .shop-goods img {
    width: 100%;
    height: 173px;
  }
  /* .shop .shop-goods:nth-child(odd) {
    margin-right: 6%;
  } */
  .shop-info a {
    width: 66px;
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 1);
    color: #fff;
    text-align: center;
    display: inline-block;
    float: right;
    margin-top: 15px;
  }
  .shop-info {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .shop-info img {
    width: 54px;
    height: 54px;
    border-radius: 5px;
    float: left;
  }
  .shop-info div {
    margin-left: 2%;
    width: 50%;
    display: inline-block;
  }
  .shop-info div p:nth-child(1) {
    font-weight: 600;
    margin-top: 5px;
  }
  .shop-info div p:nth-child(2) {
    color: #999;
    font-size: 12px;
    margin-top: 10px;
  }
</style>
